<script setup lang="ts">
definePageMeta({
  layout: 'index-page-layout'
})
let results: Ref<StrokePO[]> = ref([]);
onMounted(function (): void {
  barTitleStore().setTitle('司机端 - 我的行程')
  let loadingToast = showLoadingToast({
    message: '加载中',
    duration: 0,
    loadingType: 'circular'
  })

  cFetch<StrokePO>('/stroke/api/list', {
    auth: true,
    defaultOpts: {
      method: 'POST',
      body: {
        role: '1'
      }
    }
  }).then(result => {
    results.value = result.data
    loadingToast.close()
  }).catch(err => {
    loadingToast.close()
  })
})

function goDetail(item: StrokePO) {
  navigateTo({
    path: useRoute().path + '/detail',
    query: {
      id: item.id,
      from: item.startAddr,
      to: item.endAddr,
      time: item.departureTime,
      quantity: item.quantity,
      status: item.status
    }
  })
  // console.log(id)
}
</script>

<template>
  <div class="content"
       :style="{
      backgroundImage:`url(${ResourceGetter('stroke.png')})`
    }"
  >
    <!--  <PassengerStrokeItem-->
    <!--      v-for="item in results"-->
    <!--      :start=item.startAddr-->
    <!--      :end=item.endAddr-->
    <!--      :time=item.departureTime-->
    <!--      :quick-confirm=item.quickConfirm.toString()-->
    <!--      :status=item.status.toString()-->
    <!--      @click="goDetail(item)"-->
    <!--  ></PassengerStrokeItem>-->
    <DriverStrokeItem
        v-for="item in results"
        :start="item.startAddr"
        :end="item.endAddr"
        :time="item.departureTime"
        :status="item.status"
        :quantity="item.quantity"
        @click="goDetail(item)"
    ></DriverStrokeItem>

  </div>
</template>

<style scoped>
.content {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
  background-attachment: fixed;
  overflow: auto;
}
</style>